Nuxt.js 環境ごとにAPIのHOSTを変更する
Nuxt.js 環境ごとにAPIのHOSTを変更する
cross-envのインスト
cross-envをインストして、環境ごとに環境変数をわけられるようにします。
npm install --save cross-env
envファイルを作成する
アプリケーション直下に環境ごとにenvファイルを作成します。
env.development.js
env.production.js
env.staging.js
env.production.js
env.staging.js
各環境に合わせて、APIのURIを設定します。下記はローカル開発環境用として、ステージング、本番用にそれぞれAPIのURIを設定しておきあmス
module.exports = {
apiBaseUrl: 'http://localhost:3000'
}
package.json
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
//追加
"build:stg": "cross-env NODE_ENV=\"staging\" nuxt build",
//追加
"build:prod": "cross-env NODE_ENV=\"production\" nuxt build",
"start": "nuxt start",
//追加
"start:stg": "cross-env NODE_ENV=\"staging\" nuxt start",
//追加
"start:prod": "cross-env NODE_ENV=\"production\" nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint",
"heroku-postbuild": "npm run build"
},
...
nuxt.config
envの設定をnuxt.configに追加します
const pkg = require('./package')
//追加
const environment = process.env.NODE_ENV || 'development';
//追加
const envSet = require(`./env.${environment}.js`)
module.exports = {
//追加
env: envSet,
mode: 'universal',
axios
環境変数はprocess.env.変数名
で呼び出すことができます。
var qs = require('qs');
import axios from 'axios'
class ApplyApi {
constructor() {
this.apiBase = process.env.apiBaseUrl;
}
apply(data) {
axios.post(`${this.apiBase}/recruit_apply.json`, {
...
},
{
headers: {
'Content-Type': 'application/json'
}
})
}
}
const applyApi = new ApplyApi();
export default applyApi;